<template>
	<view class="site">
		<view class="background">
			<view class="content background" v-for="(row, index) in aList" :key="index" @tap="select(row)">
				
				<view class="surname">
					<view class="surname-item">
						{{row.head}}
					</view>
				</view>
				<view class="surname-items">
					<view class="name">
						{{row.name}}
					</view>
					<view class="site">
				   <view
					  class="address"
					  v-if="row.address"
					>{{row.address.region.label}} {{row.address.detailed}}</view>
					</view>
					<view class="tel">
						{{row.tel}}
					</view>
					 <view class="default" v-if="row.isDefault">默认</view>
				</view>
				<view class="long">
					
				</view>
				<view class="compile" @tap.stop="edit(row)">
					编辑
				</view>
			</view>
		</view>
		
		<view class="newly" @tap="add">
			 <button class="mini-btn" type="default" size="default">新增地址</button>
		</view>
	</view>
</template>

<script>
	import siteApi from "@/api/order/index.js"
	export default {
		data() {
			return {
				 aList: [],
				 userId:""
			}
		},
		onLoad(e) {
		if(e.type == "select")	{
			this.isSelect = true
		}
		this.getAddressList()
		},
		methods: {
			
			
		
		   getAddressList() {
		      siteApi
		        .addressList({
		          userId: this.$store.getters.userId
		        })
		        .then(res => {
		          this.aList = res.data.reduce((a, b) => {
					  
		            var cityCodeExt = b.cityCode.split(",");
					var cityCode = cityCodeExt.shift();
		            a.push({
		              id: b.id,
		              name: b.name,
		              head: b.tag,
		              tel: b.tel,
		              address: {
		                region: {
		                  label: b.cityStr,
		                  cityCode,
		                  value: cityCodeExt,
		                  detailed: b.cityBak
		                }
		              },
		              isDefault: b.isUse == 1
					});
					return a;
		          }, []);
		        });
		    },
			
			select(row){
				// 判断上一页面 是否需要返回地址
				if(!this.isSelect){
					return;
				}
				uni.setStorage({
				    key: 'selectAddress',
				    data: row,
				    success() {
				   			// console.log('selok')
				             uni.navigateBack();
				           }
				});
			},
			 
			// 编辑地址
			 edit(row) {
			      uni.setStorage({
			        key: "address",
			        data: row,
			        success() {
			          uni.navigateTo({
			            url: "newly/newly?type=edit"
			          });
			        }
			      });
			    },
			// 新增地址
			add(){
				uni.navigateTo({
					url:"newly/newly?type=add"
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.site{
			display: flex;
			justify-content: center;
		.background{
		
			margin-top: 30rpx;
			width: 700rpx;
			height: 260rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.content{
			display: flex;
				
				.surname{
					
					width: 82rpx;
					height: 82rpx;
					margin-top: 89rpx;
					margin-left: 30rpx;
					border-radius: 50%;
					background-color: #354E44;
					.surname-item{
						font-family: PingFangSC-Semibold;
						text-align: center;
						line-height: 82rpx;
						font-size: 36rpx;
						color: #FFFFFF;
						letter-spacing: 2.57rpx;
					}
				}
				.surname-items{
					// position:absolute;
					padding-left:26rpx ;
					padding-top: 70rpx;
					.name{
						font-family: PingFangSC-Semibold;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
					.site{
						font-family: PingFangSC-Regular;
						font-size: 22rpx;
						color: #8D8D8D;
						letter-spacing: 1.57rpx;
					}
					.tel{
						font-family: PingFangSC-Regular;
						font-size: 22rpx;
						color: #8D8D8D;
						letter-spacing: 1.57rpx;
					}
					.default{
						 font-size: 22upx;
						      width: 50rpx;
						          background-color: #354E44;
						          color: #fff;
						          padding: 0 18upx;
						          border-radius: 24upx;
						          margin-left: 150rpx;
					}
				}
				.long{
					width: 1rpx;
					height: 34rpx;
					margin-left: 170rpx;
					margin-top: 110rpx;
					opacity: 0.35;
					border: 1px solid #979797;
				}
				.compile{
					font-family: PingFangSC-Regular;
				
					padding-left: 30rpx;
					line-height: 260rpx;
					font-size: 26rpx;
					color: #8D8D8D;
					letter-spacing: 0;
				}
			}
		}
		.newly{
			position: fixed;
			left: 125rpx;
			bottom: 0;
			z-index: 999;
			width: 500rpx;
			bottom: 50rpx;
		.mini-btn{
			width: 500rpx;
			color: #fff;
			border-radius: 30rpx;
			background: #354E44;
		}	
		}
	}
</style>
